<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title>分类管理</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>

    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>
<body>

<!--头部导航栏-->
<div th:replace="commons/common_admin::topNavigationBar(searchName=${categoryName})"></div>

<div class="container-fluid">
    <div class="row">

        <!--侧边栏-->
        <div th:replace="commons/common_admin::sidebar(listCategory)"></div>

        <!--内容-->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
            <!--模态框-->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addCategoryModal"
                    data-whatever="@mdo" style="margin: 10px;"> 添加分类
            </button>
            <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModal"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel"> 添加分类 </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="categoryName" class="col-form-label">分类名称:</label>
                                    <input type="text" class="form-control" id="categoryName" name="categoryName">
                                </div>
                                <div class="form-group">
                                    <label for="categoryIcon" class="col-form-label">分类图标(应为下拉,还需优化):</label>
                                    <input type="text" class="form-control" id="categoryIcon" name="categoryIcon">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="addCategory()">添加分类</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--清除浮动-->
            <div class="clearfix"></div>

            <!--表格-->
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr class="text-center">
                        <!--<th>博客序号</th>-->
                        <th width="25%">分类标题</th>
                        <th width="25%">分类图标</th>
                        <th width="25%">创建时间</th>
                        <th width="25%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="category:${categories.records}" class="text-center" style="height: 70px; line-height: 70px;">
                        <td th:text="${category.categoryName}"></td>
                        <td>
                            <img th:src="${category.categoryIcon}" th:alt="${category.categoryIcon}" width="64" height="64">
                        </td>
                        <td th:text="${#dates.format(category.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <!--<a class="btn btn-sm btn-primary" id="edit"-->
                            <!--   th:href="@{/admin/updateCategory/{categoryId}(categoryId=${category.categoryId})}">编辑</a>-->
                            <a class="btn btn-sm btn-danger" id="delete"
                               th:href="@{/admin/removeCategory/{categoryId}(categoryId=${category.categoryId})}">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!--分页-->
            <div>
                当前第 [[${categories.current}]] 页，共 [[${categories.pages}]] 页，共 [[${categories.total}]] 条
                <nav aria-label="Page navigation example" th:if="${categories.pages>0}">
                    <ul class="pagination justify-content-center">
                        <li th:class="${categories.current == 1 ? 'page-item disabled' : 'page-item'}">
                            <a class="page-link" th:if="${categories.current == 1}"
                               th:href="@{/admin/listCategory(current=1,searchName=${categoryName})}">Previous</a>
                            <a class="page-link" th:if="${categories.current != 1}"
                               th:href="@{/admin/listCategory(current=${categories.current - 1},searchName=${categoryName})}">Previous</a>
                        </li>
                        <!--<li class="page-item active" aria-current="page"><span class="page-link">2</span></li>-->

                        <li th:class="${categories.current == pages ? 'page-item active' : 'page-item'}"
                            th:each="pages:${#numbers.sequence(1, categories.pages)}">
                            <a class="page-link" th:href="@{/admin/listCategory(current=${pages},searchName=${categoryName})}" th:text="${pages}"></a>
                        </li>
                        <li th:class="${categories.current == categories.pages ? 'page-item disabled' : 'page-item'}">
                            <a class="page-link" th:if="${categories.current == categories.pages}"
                               th:href="@{/admin/listCategory(current=${categories.current},searchName=${categoryName})}">Next</a>
                            <a class="page-link" th:if="${categories.current != categories.pages}"
                               th:href="@{/admin/listCategory(current=${categories.current + 1},searchName=${categoryName})}">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>


        </main>
    </div>
</div>


<div th:replace="commons/common_admin::adminJs"></div>
<script>
    // 添加分类事件
    function addCategory() {
        var ctxPath = '[[@{/}]]';
        var categoryName = $("#categoryName").val();
        var categoryIcon = $("#categoryIcon").val();
        console.log(ctxPath + "admin/addCategory")
        console.log(categoryName)
        $.post({
            url:ctxPath + "admin/addCategory",
            data:{'categoryName':categoryName,'categoryIcon':categoryIcon},
            success:function(data) {
                if (data == true) {
                    console.log("成功");
                    alert("成功");
                    // 成功后关闭 模态框
                    $('#addCategoryModal').modal('hide')
                    location.reload();
                } else {
                    console.log("失败");
                    $('#addCategoryModal').modal('hide')
                    alert("失败");
                    location.reload();
                }
            }
        })
    }
</script>
<div th:replace="commons/common_admin::searchBlogJs(listItem='listCategory')"></div>
</body>
</html>
